<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0",user-scalable=no>
<head th:include="cultivateWeb/header :: culHeaderCss"></head>
<link type="text/css" href="/css/cultivateWeb/style/course.css" rel="stylesheet">
<body id="body" style="background: #F6F6F6">
<header th:include="cultivateWeb/header :: header"></header>
<style>
    * {
        font-size: 14px
    }

    .left {
        float: left;
        margin-right: 20px
    }
</style>
<main id="main" style="background:#F6F6F6">
    <section id="pay">
        <input type="hidden" id="courseId" th:value="${courseId}"/>
        <input type="hidden" id="classId" th:value="${classId}"/>
        <div style="border-bottom: 2px solid #F6F6F6;padding-bottom: 10px">
            <span style="font-weight: bold" id="orderTxt"></span>
        </div>
        <div class="flex" id="courseData" style="width:100%;margin-top:140px;padding: 10px">
        </div>
        <div class="flex" id="planData" style="width:100%;padding: 10px">
        </div>
    </section>
</main>
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
<script>

    $(function () {
        getCourse();
        getPlan();
    });
    function getCourse() {
        ajaxToken("/jzApi/courses/selCourseDetails", "GET", {
            id: $("#courseId").val()
        }, function (res) {
            if (res == '') {
                $("#courseData").html('<div class="noData">暂无数据</div>');
            } else {
                var b = '';
                if (res.type == 0) {
                    b = '<span style="color: #FF9500">(证书课程)</span>'
                } else if(res.type == 1){
                    b = '<span style="color: #569175">(师资培训课程)</span>'
                } else if(res.type == 2){
                    b = '<span style="color: #569175">(考评员培训课程)</span>'
                } else if(res.type == 3){
                    b = '<span style="color: #569175">(高级师资培训课程)</span>'
                } else if(res.type == 4){
                    b = '<span style="color: #569175">(高级考评员培训课程)</span>'
                }

                var a = '<a href="/couInfo/couInfo?id=' + res.id + '" target="_blank"><div style="padding: 20px;background: #F8F9FB">' +
                    '                <div class="title" style="margin-top: 20px;padding-left:0">课程信息</div>' +
                    '                <div class="mar10">' +
                    '<div class="left" style="width:130px"><img style="width:100%;height:105px;" src="' + res.thumbnail + '"></div>' +
                    '<div class="left">' +
                    '                <div class="mar10">' +
                    '                    <span class="gray">课程名称</span>' +
                    '                    <span class="black">' + res.name + b + '</span>' +
                    '                </div>' +
                    '                <div class="mar10">' +
                    '                    <span class="gray">讲师姓名</span>' +
                    '                    <span class="black">' + res.teacherName + '</span>' +
                    '                </div>' +
                    '</div><div style="clear: both"></div>' +
                    '                </div>' +
                    '            </div></a>';
                $("#courseData").html(a);
            }
        })
    }

    function getPlan() {
        ajaxToken("/jzApi/courses/selMyCoursePlanDetials", "GET", {
            id: $("#courseId").val(),
            classId: $("#classId").val(),
        }, function (res) {
            console.log("res:"+JSON.stringify(res));
            if (res == '') {
                $("#orderData").html('<div class="noData">暂无数据</div>');
            } else {
                var a = '  <div style="padding: 20px;background: #F8F9FB">' +
                    '                <div class="title" style="margin-top: 20px;padding-left:0">课程计划信息</div>' +
                    '                <div class="mar10">' +
                    '                    <span class="gray">学习时间&nbsp;&nbsp;&nbsp;&nbsp;</span>';
                if(res.startTime!=null) {
                    a +='                <span class="black">开始时间：' + res.startTime + '</span>' +
                    '                    <span class="black">结束时间：' + res.endTime + '</span>';
                }else {
                    a +='                <span class="black">开始时间：暂无</span>' +
                        '                <span class="black">结束时间：暂无</span>';
                }
                a +='                </div>' +
                    '                <div class="mar10">' +
                    '                    <span class="gray">章节学习要求</span>' ;
                if(res.requirement==0){
                    a +='                <span class="black">通过章节测试</span>' ;
                }else if(res.requirement==1) {
                    a += '                <span class="black">在规定时间内完成学习('+ res.timeRequirement+'  ';
                    if(res.timeUnit==0){
                        a += '天)</span>';
                    }else if(res.timeUnit==1){
                        a += '小时)</span>';
                    }else if(res.timeUnit==2){
                        a += '分钟)</span>';
                    }
                }else {
                    a += '                <span class="black">暂无</span>';
                }
                a +='                </div>' +
                    '                <div class="mar10">' +
                    '                    <span class="gray">学习范围&nbsp;&nbsp;&nbsp;&nbsp;</span>';
                if(res.range==0){
                    a +='                <span class="black">学习单个课程(本课程)</span>' ;
                }else if(res.range==1){
                    a +='                <span class="black">学习多个课程（本班级的其他课程:'+res.coursesName+'）</span>' ;
                }else {
                    a += '                <span class="black">暂无</span>';
                }
                a +='                </div>' +
                    '            </div>';
                $("#planData").html(a);
            }
        })
    }


</script>
</body>
</html>